<script setup>
import { ref, onMounted, computed, watch } from "vue";
import * as echarts from "echarts";

const props = defineProps({
  chartTitle: String,
  yearValue: String,
  seriesName: String,
  datasValue: Array,
});
const pieTile = computed(()=>{
    return props.yearValue + props.chartTitle
})
const pieOption = ref({
  title: {
    text: pieTile,
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  label: {
    formatter: '{b}: {d} %'
  },
  series: [
    {
        name:props.seriesName,
        type:'pie',
        radius: '50%',
        data: props.datasValue
    }
  ],
});
const piemain = ref();
const pieChart = ref();
onMounted(() => {
  console.log('pie datasValue',props.datasValue);
  
  pieChart.value = echarts.init(piemain.value);
  pieChart.value.setOption(pieOption.value);
});
watch(pieTile,(newVal)=>{
    console.log('newVal',pieOption.value.title.text);
    
    // pieOption.value.title.text = newVal;
    pieChart.value.setOption(pieOption.value);
})
</script>

<template>
  <div ref="piemain" class="barlineview"></div>
</template>

<style lang="scss" scoped>
.barlineview {
  width: 100%;
  height: 100%;
  display: flex;
  border: 0px solid red;
}
</style>
